$radius: 100px;

.zhui-switch-circle {
  position: relative;
  width: $radius;
  height: $radius;
  background: #343b59;
  border: 3px solid #343b59;
  border-radius: 50%;

  .zhui-switch {
    &-inner {
      position: absolute;
      top: 0;
      left: 0;
      width: $radius / 2;
      height: $radius;
      background: #101019;
      border-radius: $radius 0 0 $radius;

      &::after {
        position: absolute;
        content: '';
        left: $radius / 4 + 10px;
        top: $radius - $radius / 3 - 10px;
        width: $radius / 3 - 10px;
        height: $radius / 3;
        border-radius: 50%;
        background: #101019;
      }
    }
  }

  &::before {
    position: absolute;
    content: '';
    left: $radius / 4 + 10px;
    top: 10px;
    width: $radius / 3 - 10px;
    height: $radius / 3;
    border-radius: 50%;
    background: #343b59;
    z-index: 1;
  }
}